<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="500.jsp"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/filmPerformerAndDirector.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/common.css">
	<!-- 小图标 -->
  	<link rel="icon" href="css/favicon.ico" type="image/x-icon" />
	<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
	<!-- 头部 -->
	<div class="header">
    	<div class="header-inner">
	      	<h1>
	        	<a href="index.html" class="logo">太平洋影城</a>
	      	</h1>
      		<div class="nav">
	        	<ul class="navbar">
		          	<li>
		            	<a href="index">首页</a>
		          	</li>
	          		<li>
	            		<a href="hotFilm.do">电影</a>
	          		</li>
	          		<li>
	            		<a href="#">影院</a>
	          		</li>
	          		<li>
	            		<a href="#">演出</a>
	          		</li>
		          	<li>
		            	<a href="billboard.do">榜单</a>
		          	</li>
	          		<li>
	            		<a href="#">热点</a>
	          		</li>
	          		<li>
	            		<a href="#">商城</a>
	          		</li>
	        	</ul>
      		</div>
      		<div class="user-info">
        		<div class="user-avatar J-login">
	          		<c:choose>
	       				<c:when test="${sessionScope.userLogin !=null}">
	         				<img src="${sessionScope.userLogin.uImg}">
	       				</c:when>
	       				<c:otherwise>
	         				<img src="img/top_img/default_head.png">
	       				</c:otherwise>
	     			</c:choose>
	     			<span class="caret"></span>
	     			<c:choose>
	       				<c:when test="${sessionScope.userLogin !=null}">
	         				<ul class="user-menu yes-login-menu">
					           	<li class="text">
					             	<a href="order.do?uid=${sessionScope.userLogin.uId}">我的订单</a>
					           	</li>
					           	<li class="text login-name" >
					             	<a href="userEssential.do?uId=${sessionScope.userLogin.uId}">基本信息</a>
					           	</li>
					           	<li class="text">
					             	<a href="exit.do" class="J-logout">退出登录</a>
					           	</li>
	         				</ul>
	       				</c:when>
				       	<c:otherwise>
				         	<ul class="user-menu no-login-menu">
					           	<li>
					           		<a href="login.jsp">登录</a>
					           	</li>
				         	</ul>
				       	</c:otherwise>
	     			</c:choose>
      			</div>
    		</div>
		    <form action="searchFilm.do" method="post" class="search-form">
		      	<input name="kw" class="search" type="search" maxlength="32" placeholder="找影视剧、影人、影院">
		      	<input class="submit" type="submit" value="">
		    </form>
    		<div class="app-download">
		      	<a href="#">
		        	<span class="iphone-icon"></span>
		        	<span class="apptext">APP下载</span>
		        	<span class="caret"></span>
		        	<div class="download-icon">
		          		<p class="down-title">扫码下载APP</p>
		          		<p class="down-content">选座更优惠</p>
		        	</div>
		      	</a>
    		</div>
  		</div>
	</div>
	<div class="banner">
	    <div class="wrapper clearfix">
	      <div class="celeInfo-left">
	        <div class="avatar-shadow">
	          <img class="avatar" src="${requestScope.performerOneInf.perImg}" alt="${requestScope.performerOneInf.perName}图片">
	        </div>
	      </div>
	      <div class="celeInfo-right clearfix">
	           	<div class="shortInfo">
				    <p class="china-name cele-name">${requestScope.performerOneInf.perName}</p>
				    <p class="eng-name cele-name">${requestScope.performerOneInf.perNickName}</p>
				    <p class="property">
	      				<span class="profession">编剧 | 演员</span>
	      			</p>
	   		 	</div>
			    <div class="attention" data-act="attention-click">
			        <span class="add-attention">关注</span>
			    </div>

			    <div class="masterpiece">
			      <p class="pic-title">代表作</p>
			       <ul class="master-list">
			      <c:forEach items = "${requestScope.performerOneInf.films}" var = "film">
			      		
					        <li class="master-item">
					          <a href="selectOneFilm.do?filmId=${film.filmId}" target="_blank" data-act="masterpiece-click" data-val="{ movieid:1213261 }">
					            <img class="movie-pic" src="${film.filmImg}" alt="${requestScope.performerOneInf.perName} ${film.filmName}">
					            <div class="overlay">
					              <p class="movie-name">${film.filmName}</p>
					            </div>
					          </a>
					        </li>
					    
			      </c:forEach>
			        </ul>
			     
			    </div>
			    <div class="stats-list clearfix">
			      <div class="cele-index">
			        <p class="cele-index-title">粉丝</p>
			        <p class="index-num followCount">
			        	<span class="stonefont">30</span>
			        </p>
			      </div>

			      <div class="cele-index sumBox">
			          <p class="cele-index-title">累计票房</p>
			          <p class="index-num no-info">
			          暂无
			          </p>

			      </div>
			    </div>
	      </div>
	    </div>
	</div>




	<div class="container" id="app">
		 <div class="content clearfix content-celebrity">
		      <div class="main">
		        <div class="crumbs-nav-container">
		          <a href="/">猫眼电影</a> &gt; <a href="/films">电影</a> &gt; <span>${requestScope.performerOneInf.perName}</span>
		        </div>
				  <div class="module">
				    <div class="mod-title">
				      <h2>介绍</h2>
				    </div>
				    <div class="mod-content">
				        <div class="introduce">
				            <div class="folding-content">
				              <p class="cele-desc">${requestScope.performerOneInf.perIntroduce}</p>
				              <div class="celeInfo-list">
				                <dl class="dl-left">
				                  <dt class="basicInfo-item name">出生地</dt>
				                  <dd class="basicInfo-item value">${requestScope.performerOneInf.perBirthPlace}</dd>
				                  <dt class="basicInfo-item name">身&nbsp;&nbsp;&nbsp;&nbsp;份</dt>
				                  <dd class="basicInfo-item value">编剧 | 导演</dd>
				                  <dt class="basicInfo-item name">性&nbsp;&nbsp;&nbsp;&nbsp;别</dt>
				                  <dd class="basicInfo-item value">${requestScope.performerOneInf.perSex}</dd>
				                </dl>
				                <dl class="dl-right">
				                  <dt class="basicInfo-item name">国&nbsp;&nbsp;&nbsp;&nbsp;籍</dt>
				                  <dd class="basicInfo-item value">${requestScope.performerOneInf.perNationnality}</dd>
				                  <dt class="basicInfo-item name">星&nbsp;&nbsp;&nbsp;&nbsp;座</dt>
				                  <dd class="basicInfo-item value">${requestScope.performerOneInf.perStar}</dd>
				                  <dt class="basicInfo-item name">别&nbsp;&nbsp;&nbsp;&nbsp;名</dt>
				                  <dd class="basicInfo-item value">${requestScope.performerOneInf.perTypr}</dd>
				                </dl>
				                <dl class="dl-right">
				                  <dt class="basicInfo-item name">英&nbsp;文&nbsp;名</dt>
				                  <dd class="basicInfo-item value">${requestScope.performerOneInf.perNickName}</dd>
				                  <dt class="basicInfo-item name">身&nbsp;&nbsp;&nbsp;&nbsp;高</dt>
				                  <dd class="basicInfo-item value">${requestScope.performerOneInf.perHeight}</dd>
				                  <dt class="basicInfo-item name">出生&nbsp;&nbsp;日期</dt>
				                  <dd class="basicInfo-item value">${requestScope.performerOneInf.perBirth}</dd>
				                </dl>
				              </div>
				            </div>
				            <div class="folding-control">
				              <a href="javascript:void(0);" class="control-btn open" data-act="show-intro-click"><span>展开详细资料</span></a>
				              <a href="javascript:void(0);" class="control-btn closed" data-act="close-intro-click"><span>收起</span></a>
				            </div>
				         </div>
				    </div>
				  </div>

				          

				 <div class="work">
					  <div class="module">
					    <div class="mod-title">
					      <h2>作品</h2>
					        <span class="about-num">（3部）</span>
					    </div>
					    <div class="mod-content">
					        <div class="folding-content">
					        
							  <div class="movie-year">
							    <span class="year">2021</span>
							    <ul class="movie-BY-list">
							    <c:forEach items = "${requestScope.performerOneInf.films}" var = "film">
							    	 <li class="movie-BY-item">
								        <a href="selectOneFilm.do?filmId=${film.filmId}" target="_blank" data-act="work-click" data-val="{movieid:1213261}">
								          <div class="movie-detail">
								            <img class="default-img" alt="${requestScope.performerOneInf.perName} ${film.filmName}" src="${film.filmImg }">
								            <p class="movie-name">${film.filmName}</p>
								          
								          </div>
								        </a>
								      </li>
							    </c:forEach>
							     
							    </ul>
							  </div>
					        </div>
					        <div class="folding-control">
					            <a href="javascript:void(0);" class="control-btn open JS_workMore" data-act="more-work-click"><span>查看更多</span></a>
					        </div>
					    </div>
					  </div>
					</div>

		      </div>
		      <div class="aside">
		          <div class="relationship">
				  <div class="module">
				    <div class="mod-title">
				      <h2>相关影人</h2>
				    </div>
				    <div class="mod-content">
				        <div class="slider-wrapper">
			                <div class="slider rel-slider">
			                  <div class="item">
			                  <%
			                		int min = 1;
			                		int max = 3;
			                		
			                		for (int j = 0; j < 100; j++) {
			                			int i = (int)(Math.random()*(3-1)+1);
			                			int a = (int)(Math.random()*(10-1)+1);
			                			if(a-i==4 && a>i ) {
			                				min = i;
			                				max = a;
			                				break;
			                			}
			                		}
		            			%>
			                  <c:forEach items="${requestScope.performers }" begin="<%=min %>" end="<%=max %>" var ="director">
			                  		<div class="rel-item"> 
					                      <a href="filmPerformer.do?perId=${director.perId}" target="_blank" data-act="relationship-click" data-val="{relCelebrity:599}">
					                        <img class="rel-avatar" src="img/filmPerformerAndDirector_img/mohu7.png" height="106" width="106" style="background:url(${director.perImg}) center;background-size: cover;
    background-position: center;" alt="${director.perName }">
					                        <p class="rel-name">${director.perName }</p>
					                      
					                      </a>
			                    	</div>
			                  </c:forEach>  
			                  </div>
			                </div>
				        </div>
				    </div>
				  </div>
		          </div>
		      </div>
		  </div>
    </div>
    
<!-- 底部 -->
	<div class="footer">
    	<div class="content">
      		<div class="moduleBox">
        		<div class="informationBox">
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>影城公告</span>
            			</a>
            			<ul>
              				<li>影城公告</li>
            			</ul>
          			</div>
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>会员中心</span>
            			</a>
			            <ul>
			              	<li>加入会员</li>
			              	<li>会员活动</li>
			              	<li>会员优惠</li>
			            </ul>
          			</div>
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>影片资讯</span>
            			</a>
			            <ul>
			              	<li>正在热映</li>
			              	<li>即将上映</li>
			            </ul>
          			</div>
		          	<div class="copy_van">
		            	<a class="ycgg" href="">
		            		<span>影城活动</span>
		            	</a>
		            	<ul>
		              		<li>影城活动</li>
		              		<li>电影资讯</li>
		            	</ul>
		          	</div>
		          	<div class="copy_van">
		            	<a class="ycgg" href="">
		            		<span>关于我们</span>
		            	</a>
			            <ul>
			              	<li>影城介绍</li>
			              	<li>影院介绍</li>
			              	<li>联系我们</li>
			            </ul>
		          	</div>
        		</div>
        		<div class="abc">
          			<div class="textFloat">
            			<div class="erwei1">
                        	<span class="spans ">
                               	<img class="img1" src="img/foot_img/wxerweima.png" alt="">
                            </span>
              				<span class="spans spanss">
                            	<a href="">微信在线购票</a>
                            </span>
            			</div>
            			<div class="erwei2">
                            <span class="spans">
                        		<img class="img1" src="img/foot_img/xcx.jpg" alt="">
                            </span>
              				<span class="spans spanss">
                                <a href="">小程序在线购票</a>
                            </span>
            			</div>
          			</div>
        		</div>
        		<div class="right_information">
		          	<ul class="ul1">
		            	<li class="lis1">连锁热线：</li>
		            	<li class="lis2">400-850-3366</li>
		          	</ul>
		          	<ul class="ul1">
		            	<li class="lis3">官方微信：</li>
		            	<li class="lis4">搜索“猫眼电影”</li>
		          	</ul>
        		</div>
		        <div class="top_btn">
                    <span>
                       	<a href="javascript:void(0)" id="top">TOP</a>
                    </span>
		        </div>
      		</div>
	      	<div class="foot_text">
	       		<div class="foot"> 版权所有(C)猫眼电影投资有限公司　　技术支持：3-1-501</div>
      		</div>
    	</div>
  	</div>
</body>
<script src="js/common.js"></script>
</html>